<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="operatingrecord">
            <template #header>
                <div class="serchbox">
                    <div class="left">
                        <div class="item">
                            <el-input v-model="queryData.keyWords" class="serchs" @input="paginaClick(1)" placeholder="搜索供应商">
                                <template #suffix>
                                    <el-icon class="el-input__icon"><search /></el-icon>
                                </template>
                            </el-input>
                        </div>
                        <sxnfbtn @click="paginaClick(1)">搜索</sxnfbtn>
                    </div>
                    <div class="rightBox">
                        <div class="tip">搜索范围包括:供应商名称，产业分类，联系地址、受托人信息等。</div>
                        <!-- <div class="right">
                            <div class="item" @click="condition('')">全部列表</div>
                            <div class="item" @click="condition('2')">审核通过</div>
                            <div class="item" @click="condition('1')">未审核</div>
                            <div class="item" @click="condition('-1')">审核不通过</div>
                        </div> -->
                        <sxnfbtn @click="topages('/team/suppliermanagement/suppliermsg')">新增供应商</sxnfbtn>
                    </div>
                    <!-- <el-button type="primary" text bg @click="topages('/team/clientmanagement/clientmsg')">新增客户</el-button> -->
                </div>
            </template>
            <el-table :data="pageData.list" style="width: 100%; margin-top: 20px" border>
                <el-table-column prop="name" label="序号" width="50">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="supplierName" label="更新时间"></el-table-column> -->
                <el-table-column prop="supplierName" label="供应商名字"></el-table-column>
                <el-table-column prop="supplierPhone" label="联系电话"></el-table-column>
                <el-table-column prop="name" label="供应商产业分类" width="400">
                    <template #default="scope">
                        <div v-if="scope.row.industrialClassificationList.length > 0">
                            <div v-for="item in scope.row.industrialClassificationList" :key="item.industrialId">{{ item.industrialName }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="供应商联系地址" width="460">
                    <template #default="scope">
                        <div v-if="scope.row.supplierAddressArea">{{ JSON.parse(scope.row.supplierAddressArea).valueText }}/{{ scope.row.supplierAddress }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="" label="平台用户">平台用户</el-table-column>
                <el-table-column prop="" label="委托审核状态"></el-table-column> -->
                <el-table-column label="操作" width="225">
                    <template #default="scope">
                        <el-button type="primary" size="small" link @click="topages(`/team/suppliermanagement/suppliermsg?id=${scope.row.supplierId}&type=1`)"> 查看 </el-button>
                        <el-button type="primary" size="small" link @click="topages(`/team/suppliermanagement/suppliermsg?id=${scope.row.supplierId}&type=2`)"> 修改 </el-button>
                        <el-button type="primary" size="small" link>资质</el-button>
                        <el-button type="primary" size="small" link>委托</el-button>
                        <el-button type="danger" size="small" link @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getSupplier, deleteSupplier } from "@/api/team";
import { ElMessage, ElMessageBox } from "element-plus";
// import { Refresh } from "@element-plus/icons-vue";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore();
// 监听头部公司选择框数据变化
const selectCompany = computed({
    get: () => {
        return store.getters.mainTeamId;
    },
    set: (val) => {
        console.log(val);
    },
});
watch(
    selectCompany,
    (newVal, oldVal) => {
        if (oldVal) {
            getPageData();
        }
    },
    { immediate: true, deep: true }
);
const pageData = reactive({
    list: [],
    total: 0,
});
const queryData = reactive({
    pageNum: 1,
    pageSize: 10,
    ownerTeamId: selectCompany.value,
    keyWords: "",
    status: "",
});
const getPageData = () => {
    getSupplier(queryData).then((res: any) => {
        pageData.list = res.data.list;
        pageData.total = res.data.total;
        console.log(res);
    });
};
getPageData();
const topages = (url: string) => {
    router.push(url);
};
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getPageData();
};
// 删除
const deleteRow = (row: any) => {
    ElMessageBox.confirm("确定要删除该供应商吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deleteSupplier({
            id: row.supplierId,
            teamId: store.getters.mainTeamId,
        }).then((res: any) => {
            ElMessage.success("删除成功");
            if (queryData.pageNum > 0) {
                if (pageData.list.length == 1) {
                    queryData.pageNum = 1;
                }
            }
            getPageData();
        });
    });
};
const condition = (type: string) => {
    queryData.status = type;
    paginaClick(1);
};
</script>
<style scoped lang="scss">
.operatingrecord {
    .serchbox {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .item {
                margin-right: 20px;
                color: #333333;
                font-size: 14px;
                .serchs {
                    width: 300px;
                }
            }
        }
        .tip {
            font-size: 12px;
            color: #999999;
            margin-top: 10px;
        }
        .rightBox {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            // margin-top: 20px;
            .item {
                padding: 0 18px;
                height: 38px;
                line-height: 38px;
                margin-left: 18px;
                font-size: 14px;
                color: #333333;
                background: rgba(0, 0, 0, 0.05);
                border-radius: 5px;
                cursor: pointer;
            }
        }
    }
    .foncBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .leftBtn {
                margin-left: 10px;
            }
            span {
                font-weight: 300;
                margin-left: 10px;
                font-size: 12px;
                color: #999999;
            }
        }
        .right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .item {
                padding: 0 18px;
                height: 38px;
                line-height: 38px;
                margin-left: 18px;
                font-size: 14px;
                color: #333333;
                background: rgba(0, 0, 0, 0.05);
                border-radius: 5px;
                cursor: pointer;
            }
        }
    }
    .bottomBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
}
</style>
